<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>定时器bootstrap</title>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">我还是喜欢你</a></li>
        <li><a href="#">Something 111else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link1111</a></li>
    </ul>
    <button class="btn btn-default dropdown-toggle" id="btn" onclick="clickMsg()">开始</button>
</div>
<hr>

<div class="progress">
    <div class="progress-bar" id="pro" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
        0%
    </div>
</div>
    <div style="width:100%;height:600px;background-color: #faebcc">

    </div>
</body>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/bootstrap/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script>
    var pro = document.getElementById('pro');
    // pro.innerHTML='30%';
    // pro.style.width='30%';
    // console.log(pro.innerHTML);
    function clickMsg()
    {
        var btn = document.getElementById("btn");
        var number = 1;
        var intervalId = setInterval(function () {
            btn.disabled=true;
            btn.innerHTML=number;
            //步骤一:创建异步对象
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('get','/index/front/setIntervalAjax?number='+number);
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {
                if (ajax.readyState===4 &&ajax.status===200) {
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                    //输入相应的内容
                    // console.log(ajax.responseText);
                    // var res = ajax.responseText >= 101;
                    // if(res){
                    //     clearInterval(intervalId);
                    //     btn.disabled=false;
                    //     btn.innerHTML='100';
                    //     console.log(ajax.responseText);
                    // }else{
                    //     // console.log(ajax.responseText);
                    //     pro.innerHTML=ajax.responseText+'%';
                    //     pro.style.width=ajax.responseText+'%';
                    //     clearInterval(intervalId);
                    //     btn.disabled=false;
                    //     btn.innerHTML='100';
                    // }
                    var res = ajax.responseText <= 100;
                    if(res){
                        pro.innerHTML=ajax.responseText+'%';
                        pro.style.width=ajax.responseText+'%';
                    }else{
                        clearInterval(intervalId);
                        btn.disabled=false;
                        btn.innerHTML='100';
                    }
                }
            };
            number = number+1;
        },200);
    }
</script>
</html>